<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/* 尺寸问题：屏幕宽高比不一致，限定一个宽高范围
			 min-width属性：最小宽度 【√】 min-height属性：最小高度
			 max-width属性：最大宽度  【√】 max-height属性：最大高度*/
			div{
				width: 80%;  /*默认宽度*/
				min-width: 500px;  /*内容最小宽度时500px，不能改变*/
			    max-width: 600px;  /*页面尺寸:最小时500px,最大是600px,默认80%*/
				/* 定好最小跟最大宽高，PC：80%  300px
				     移动： 500~600宽度【页面不变】 300px
					  自适应*/
				height: 300px;
				background: skyblue;
			}
			/**
			 * html结构   1.外层div---.container   内层div--.box  写lorem
			 * css结构    .container样式：背景颜色：#f0f0f0;
			 *                           padding：20px;
			 *                             文本居中;
			 *            .box样式:背景颜色#4caf50;
			 *                     文字改下颜色：白色
			 *                     宽度60%
			 *                     宽度范围:500~600px【页面不变】
			 *                     margin:auto
			 */
		</style>
	</head>
	<body>
		<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione cupiditate odio ipsum ex molestias, est magni voluptatem eos cum quos quia molestiae consequuntur dignissimos sapiente itaque sequi dolorem repudiandae quam.</div>
	</body>
</html>